<template>
  <el-dialog  title="支付结果" v-model="dialogVisible" @close="submit" width="580px" destroy-on-close>
        <el-row>
          <el-col :span="24">
            <div class="main">
              <div class="success">
                <img class="icon" src="@/assets/svgs/pay-success.svg"/>
                <div class="txt">支付成功</div>
              </div>
            </div>
          </el-col>
        </el-row>
        <template #footer>
          <div >
              <el-button type="warning" round  @click="printOrder()">打印小票</el-button>
              <el-button type="primary" round @click="submit()">确 认</el-button>
          </div>
        </template>
  </el-dialog>
</template>
<script setup lang="ts" name="payResult">
import * as CashierApi from '@/api/mall/cashier'
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false)

const props = defineProps<{
  orderId: ''
}>()

const open = async () => {
  dialogVisible.value = true
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const submit = () => {
  dialogVisible.value = false
}

const printOrder = async() => {
  let data = await CashierApi.printOrder({orderId:props.orderId})
  if(data){
    message.success("已发送打印")
    submit()
  }
 
}

</script>
<style lang="scss" scoped>
  .main {
     height: 140px;
     padding-top: 10px;
     text-align: center;
     font-size: 14px;
     .txt {
       margin-top: 8px;
     }
     .amount-info {
        margin-top: 6px;
        font-size: 28px;
     }
  }
</style>
